<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-form :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="子订单号" prop="order_detail_no">
					<el-input v-model="state.queryParams.order_detail_no" clearable placeholder="请输入子订单号" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="子订单号" align="center" prop="order_detail_no" />
				<el-table-column label="快递信息" align="center" prop="order_info" width="218">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div v-if="row.logistics.length" style="text-align: left">
								快递公司：{{ row.logistics[0].logistics_name }}<br />
								快递单号：{{ row.logistics[0].logistics_no }}<br />
								<span v-if="row.logistics.length > 1">
									其他快递：<el-popover placement="top" title="其他快递" :width="296" trigger="hover">
										<el-table :data="row.logistics" border>
											<el-table-column label="快递公司" align="center" width="100" prop="logistics_name" />
											<el-table-column label="快递单号" align="center" width="170" prop="logistics_no" />
										</el-table>
										<template #reference>
											<el-button type="primary" link>查看</el-button>
										</template>
									</el-popover>
								</span>
							</div>
							<div v-else>----</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column v-if="state.queryParams.status == '2'" label="失败原因" align="center" prop="address_info" width="166">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<el-popover v-if="row.fail_reason" placement="top" title="失败原因" :width="200" trigger="hover" :content="row.fail_reason">
								<template #reference>
									<el-button type="primary" link>查看</el-button>
								</template>
							</el-popover>
							<span v-else>----</span>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
			</el-table>
			<template #footer>
				<PaginationComponent
					v-if="state.total"
					:total="state.total"
					v-model:page="state.queryParams.pageNum"
					v-model:limit="state.queryParams.pageSize"
					@pagination="getList"
				/>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { orderApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';

const OrderApi = orderApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams: {
		status: '',
		import_id: '',
		order_detail_no: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
});

const queryFormRef = ref();

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	const filePathArr = row.file_path.split('/');
	let status_text = '';
	if (row.status === 1) {
		status_text = '成功';
	} else if (row.status === 2) {
		status_text = '失败';
	}
	state.dialog.title = `「${filePathArr[filePathArr.length - 1]}」导入${status_text}待发货订单`;
	state.queryParams = {
		status: row.status,
		import_id: String(row.id),
		order_detail_no: '',
		pageNum: 1,
		pageSize: 10,
	};
	getList();
};
// 刷新列表
const getList = () => {
	state.loading = true;
	_importFileOrderList(state.queryParams);
};
// 创建时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};

/********** 网络请求 **********/
// 导入待发货文件的订单列表
const _importFileOrderList = (params: Object) => {
	OrderApi.importFileOrderList(params)
		.then((res) => {
			state.tableList = res.data.list.map((item: any) => {
				const freight_info = item.freight_info.split(',');
				const logistics = freight_info.map((item1: any) => {
					const logisticsInfo = item1.split(':');
					return {
						logistics_name: logisticsInfo[0],
						logistics_no: logisticsInfo[1],
					};
				});
				return {
					...item,
					logistics,
				};
			});
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
